<!--
 * @Author: your name
 * @Date: 2021-11-10 15:32:04
 * @LastEditTime: 2021-12-04 08:48:26
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\admin\src\views\home\poster\index.vue
-->
<template>
  <div class="poster-box">
    <el-card>
      <el-upload
        drag
        action
        :http-request="handleUpload"
        :before-upload="beforeUpload"
      >
        <i class="el-icon-upload"></i>
        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
        <p class="ant-upload-hint">文件将上传到 OSS, 如未配置请先配置</p>
      </el-upload>
    </el-card>

    <el-card class="box-card">
      <div class="input-box">
        <div class="title-input-box">
          <div>文件名称:</div>
          <el-input placeholder="请输入文件名称" v-model="title"> </el-input>
        </div>
        <div class="title-input-box">
          <div>文件类型:</div>
          <el-input placeholder="请输入文件类型" v-model="type"> </el-input>
        </div>
      </div>
      <div class="search-btn-box">
        <el-button type="primary" @click="searchFile">搜索</el-button>
        <el-button @click="result">重置</el-button>
      </div>
    </el-card>
    <div class="main-card">
      <div
        style="width: 25%; max-width: 25%"
        v-for="item in fileList"
        :key="item.id"
        @click="showDrawer(item)"
      >
        <a-card hoverable style="width: 95%">
          <img
            slot="cover"
            alt="example"
            :src="item.url"
            style="width: 100%; height: 150px"
          />
          <a-card-meta :title="item.name">
            <template slot="description"
              >上传于{{ item.lastModified }}</template
            >
          </a-card-meta>
        </a-card>
      </div>
    </div>
    <a-card>
      <div class="pageination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[8, 12, 24, 36]"
          layout="total, prev, pager, next, sizes"
          :total="total"
        >
        </el-pagination>
      </div>
    </a-card>
    <a-drawer title="文件信息" width="620" :visible="visible" @close="onClose">
      <img
        :src="form.url"
        alt=""
        style="width: 100%; height: 300px; margin-bottom: 20px"
      />
      <div class="info-box">文件名称: {{ form.name }}</div>
      <div class="info-box">存储路径: {{ form.path }}</div>
      <div class="info-box">
        <span style="margin-right: 150px">文件类型: {{ form.type }}</span>
        <span>文件大小: {{ form.size }} </span>
      </div>
      <div class="info-box copy-link">
        <span>访问链接: </span>
        <p v-copy="copyText">{{ form.url }}</p>
      </div>
      <div class="info-box copy-link">
        <span> </span>
        <span v-copy="copyText"><el-button type="text">复制</el-button></span>
      </div>
      <div
        :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
      >
        <a-button style="margin-right: 8px" @click="onClose"> 关闭 </a-button>
        <el-popconfirm title="确定删除吗？" @confirm="delFile">
          <el-button slot="reference" type="text" style="margin-left: 5px"
            ><a-button style="border-color: red; color: red"
              >删除</a-button
            ></el-button
          >
        </el-popconfirm>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { put, signatureUrl, getFileNameUUID, list, del } from "@/utils/oss.js";
import changeByte from "../../../utils/convertUnit";
export default {
  data() {
    return {
      fileList: [],
      type: "",
      title: "",
      pageSize: 8,
      pageIndex: 1,
      total: 0,
      visible: false,
      form: {
        name: "",
        path: "",
        type: "",
        size: "",
        url: "",
      },
    };
  },
  methods: {
    // //改每页条数时
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOssFile();
    },
    //改变页码时
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOssFile();
    },
    //  自定义上传方法
    beforeUpload(file) {
      return true;
    },
    async handleUpload(option) {
      NProgress.start();
      // // 获取文件的后缀名
      var obj = option.file.name;
      var index = obj.lastIndexOf(".");
      obj = obj.substring(index, obj.length);
      // 生成的文件名，保留文件后缀名，进行拼接
      let objName = getFileNameUUID() + option.file.name;
      // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
      await put(`flieName/${objName}`, option.file).then((res) => {
        console.log(res);
        // 上传成功之后，转换真实的地址
        signatureUrl(`flieName/${objName}`).then((res) => {
          console.log(res);
        });
      });
      NProgress.done();
      this.getOssFile();
    },
    async getOssFile() {
      //显示加载进度条--->提示用户加载进度
      NProgress.start();
      const res = await list();
      console.log(res);
      this.fileList = res.objects;
      //结束用户加载进度
      this.fileList.sort((a, b) => {
        return new Date(b.lastModified) - new Date(a.lastModified);
      });
      this.fileList = this.fileList.map((item) => {
        return {
          ...item,
          name: item.name.split("flieName/")[1],
          path: item.name,
          type: "image/" + item.name.split(".")[1],
          size: changeByte(item.size),
        };
      });
      let newList = this.fileList;
      this.total = newList.length;
      if (this.title) {
        newList = newList.filter((item) => item.name.includes(this.title));
      }
      if (this.type) {
        newList = newList.filter((item) => item.type.includes(this.type));
      }
      this.fileList = newList.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageSize * this.pageIndex
      );
      this.total = newList.length;
      // this.total = this.fileList.length;
      NProgress.done();
    },

    //搜索事件
    searchFile() {
      this.pageIndex = 1;
      this.getOssFile();
    },
    // //重置
    result() {
      this.type = "";
      this.title = "";
      this.pageSize = 8;
      this.pageIndex = 1;
      this.getOssFile();
    },
    showDrawer(data) {
      this.visible = true;
      this.form = { ...data };
      this.copyText = data.url;
    },
    onClose() {
      this.visible = false;
    },
    async delFile() {
      NProgress.start();
      const data = await del("flieName/" + this.form.name);
      if (data.res.status !== 204) {
        return this.$message({
          type: "warning",
          message: "错误的参数",
        });
      }
      this.$message({
        type: "success",
        message: "删除成功",
      });
      this.getOssFile();
      this.onClose();
      NProgress.done();
    },
  },
  async created() {
    //获取文件数据
    this.getOssFile();
  },
};
</script>

<style lang="scss" scoped>
.oss-box {
  width: 100%;
}
.poster-box {
  width: 100%;
  padding: 20px;
}

.box-card {
  margin: 20px 0;
}
.poster-box {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 15px;
  .input-box {
    display: flex;
  }
}
.input-box .title-input-box {
  margin: 0 20px;
  display: flex;
  align-items: center;
  div {
    width: 65px;
  }
  .el-input {
    width: 250px;
    margin-left: 10px;
  }
}
.search-btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .el-button {
    height: 35px;
    line-height: 12px;
  }
}
.main-card {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  .ant-card {
    padding: 20px;
    border: none;
    margin: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.pageination-box {
  display: flex;
  justify-content: flex-end;
}
.info-box {
  font-size: 12px;
  margin: 15px 0;
  color: #000;
}
.copy-link {
  display: flex;
  margin-bottom: -30px;
  span {
    width: 55px;
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  p {
    width: 510px;
    flex-shrink: 0;
    border: 1px solid #ccc;
    padding: 5px;
  }
}
</style>
